<template>
<div>
  <head title="Ivoice"></head>
  <div class="wrapper">
    <div class="detailItem"> 
      <div class="imgBox">
        
         <image
          class="ImgAuto"
          :style="{ height: imgHeight+'px', width:600+'px'}"
          :src="invoice_url"
          @load="onImageLoad"
          resize="cover"
          ref="invoiceImg"
        ></image> 
        <div class="loadIMG" v-if="!isload">
           <image v-if="errorImg" class="errorImg" src="root:img/e_seel.png"></image>
          <floading v-if="!errorImg" class="indicator" color="#303030"></floading>
          
        </div>
        
      </div>
     
      <div class="btnrow" >
        <text class="deBtn" v-if="isload" @click="saveinvoice">Save invoice</text>
        <text class="deBtn" v-if="invoice_url" @click="sendemail">Send email</text>
      </div>
    </div>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
import { send_email, get_invoice } from "../../../mixin/ajax";
import asCore from "../../../mixin/core";

export default {
  data() {
    return {
      users_id: "",
      co_order_id: "",
      imgHeight:400,
      invoice_url:"",
      errorImg:false,
      isload:false
         
    };
  },
  created() {
    // this.push("root:app/goods/searchGoods2.js", {
    //       name: item.title,
    //       img: item.img,
    //       setype: 0,
    //       id: item.id
    //     });
  },
  methods: {
    onLoad(parmar) {
      if (parmar && parmar.id) {
        this.log(parmar.id);
        this.co_order_id = parmar.id;
        asCore.getBsessionid(userId => {
          this.users_id = userId;
          this.getinvoice();
        });
      }
    },
    saveinvoice() {
      const $image = this.$refs.invoiceImg;
      $image.save(result => { 
        if (result.success) {
          // Do something to hanlde success
          this.alert("Invoice  downloaded") 
        } else {
          console.log(result.errorDesc);
          // Do something to hanlde failure
        }
      });
    },
    getinvoice() {
      get_invoice(
        {
          users_id: this.users_id,
          co_order_id: this.co_order_id,
          is_activity: "0"
        },
        (res, flag) => {
          if (flag) {
            if (res.code == 200) {
              this.invoice_url = res.data.invoice_url;
            } else {
              this.toast(res.message);
            }
          }
        }
      );
    },
     onImageLoad(data) {
      this.log(data)
      
      if (data.success) {
        this.isload=true;
        let imgWidth=data.size.naturalWidth;
        let height=data.size.naturalHeight;
        this.imgHeight=600*(height/imgWidth)
      }else{
        this.errorImg =true;
        
      }
    },
    sendemail() {
      if (!this.invoice_url) {
        this.toast("please get invoice");
        return false;
      }
      send_email(
        { users_id: this.users_id, invoice_url: this.invoice_url },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
          }
        }
      );
    }
  }
};
</script>

<style scoped>
.wrapper {
  background-color: #f5f5f5;
}
.detailItem {
  padding: 32px;
  background-color: #ffffff;
}

.mt20 {
  margin-top: 20px;
}
.loadIMG{
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   justify-content: center;
   align-items: center;
}
.indicator{
  width: 40px;
  height: 40px;
}
.invoiceImg {
  width: 500px;
  height: 280px;

  margin-top: 40px;
}

.itemLeft {
  flex-direction: row;
  align-items: center;
}
.imgBox {
  background-color: #f2f2f2;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
}

.detaTit {
  color: #999999;
  font-size: 28px;
  width: 260px;
}

.detaInf {
  color: #333333;
  font-size: 28px;
  line-height: 40px;
}

.active {
  color: #ba8833;
}
.btnrow {
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 40px;
}
.errorImg{
  width: 200px;
  height: 200px;;
}
.deBtn {
  height: 44px;
  border-width: 1px;
  border-color: #333333;
  border-style: solid;
  color: #333333;
  font-size: 28px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 44px;
  margin-left: 20px;
}
.deBtn:active{
  background-color: #f2f2f2;
}
</style>
